<%@ page import="java.util.*,util.*,dal.*,model.*,bll.*,java.text.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>	
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%
	int accType = 2;
	String username = (String)session.getAttribute("username");
	String pass = (String)session.getAttribute("password");
	
	if(username != null && pass != null)
	{
		AccountModel acc = new AccountModel();
		accType = acc.CheckLogin(username, pass); // Value can be: 0: manager, 1: user, 2: no-account
	}
	
	if(accType == 2)
		response.sendRedirect("Login.jsp");
	else
		session.setAttribute("login-in", "true");	
%>
<%
	List<ProjectModel> projectList = CacheUtil.getProjectList();
%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Buzz Communication</title>

	<link rel='stylesheet' type='text/css' href='css/common.css' />
	<link rel="stylesheet" type="text/css" href="css/buzz-design.css"/>
	<link rel='stylesheet' type='text/css' href='css/project-slide.css'/>
	<link rel="stylesheet" type="text/css" href="calendar/css/calendar.css"/>
 	<link rel="stylesheet" type="text/css" href="css/tab.css"/>
	<link rel="stylesheet" href="css/hyjack.css" type="text/css" />
	<link rel="stylesheet" href="css/themes/ui-lightness/jquery.ui.all.css" />
	<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.css' />
	<link rel='stylesheet' type='text/css' href='fullcalendar/fullcalendar.print.css' media='print' />
	<link rel="stylesheet" type="text/css" href="css/scrollbar.css"/>
	<link rel="stylesheet" type="text/css" href="css/splitter.css"/>
<!-- 	<link rel="stylesheet" href="css/jquery-ui-1.8.14.custom.css" type="text/css" /> -->
	<link rel="stylesheet" href="css/jquery-dialog.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery.cleditor.css" />
	
	
	
	<script type='text/javascript' src='js/jquery.min.js'></script>
	<script type='text/javascript' src='js/jquery-ui-1.8.14.custom.min.js'></script>
	<script type='text/javascript' src='js/project-slide.js'></script>
	<script src="calendar/js/jMonthCalendar-1.0.1.js" type="text/javascript"/></script>
	<script type='text/javascript' src='js/tab.js'></script>
	<script type="text/javascript" src='js/jquery.splitter.js'></script>
	<script type='text/javascript' src='js/common.js'></script>
	<script type='text/javascript' src='js/email.js'></script>
	<script type='text/javascript' src='js/chatting.js'></script>
 	<script language="javascript" type="text/javascript" src="js/jquery.hyjack.js"></script>
	<script language="javascript" type="text/javascript" src="js/jquery.hyjack.select.js"></script>
	
    <script type="text/javascript" src="js/jquery.cleditor.min.js"></script>
    <script type="text/javascript" src="js/jquery.cleditor.table.min.js"></script>
    <script type="text/javascript" src="js/jquery.cleditor.xhtml.min.js"></script>

	<script src="js/jquery.tinyscrollbar.js" type="text/javascript"></script>	
	<script type='text/javascript' src='fullcalendar/fullcalendar.min.js'></script>
	
<script type='text/javascript'>
	var userName = "";
	$(document).ready(function() {
		
		//get current usser account
		userName = '<%=(session.getAttribute("username") != null ? session.getAttribute("username") : "") %>';
		
		
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$( "#dialog:ui-dialog" ).dialog( "destroy" );
		
		var name = $( "#name" ),
			email = $( "#email" ),
			password = $( "#password" ),
			allFields = $( [] ).add( name ).add( email ).add( password ),
			tips = $( ".validateTips" );

		function updateTips( t ) {
			tips
				.text( t )
				.addClass( "ui-state-highlight" );
			setTimeout(function() {
				tips.removeClass( "ui-state-highlight", 1500 );
			}, 500 );
		}

		function checkLength( o, n, min, max ) {
			if ( o.val().length > max || o.val().length < min ) {
				o.addClass( "ui-state-error" );
				updateTips( "Length of " + n + " must be between " +
					min + " and " + max + "." );
				return false;
			} else {
				return true;
			}
		}

		function checkRegexp( o, regexp, n ) {
			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass( "ui-state-error" );
				updateTips( n );
				return false;
			} else {
				return true;
			}
		}
		
		$( "#dialog-form" ).dialog({
			autoOpen: false,
			height: 440,
			width: 550,
			modal: false,
			resizable: false,
			buttons: {
				"Send ": function() {
					var content = "<html><body>" + $("#emailNewContent").val() + "</body></html>";
					var TOList = $("#emailNewToList").val();
					var subject = $("#emailNewSubject").val();
					var CCList = "";
					var BCCList = "";
					//sendEmail(subject, TOList, CCList, BCCList, content);
					//$("#emailNewToList").disable();
					//$("#emailNewSubject").disable();
					theEditor.disable(true);
				},
				"Save now": function() {
						alert(theEditor.selectedHTML());
				},
				"Discard": function() {
					$("#emailNewToList").val("");
					$("#emailNewSubject").val("");
					theEditor.clear();
					$(this).dialog("close");
				}
			},
			close: function() {
				allFields.val("").removeClass( "ui-state-error" );
			}
			,
			open: function() {
				theEditor = $("#emailNewContent").cleditor()[0].focus();
			}
			
		});
		
		
		//var today = new Date();
		//todayString = today.getDate() + " " + today.getMonth() + " " + today.getFullYear();
		
		$(".tabs").css("display","none");
		$("#divActivity").css("display","none");
		//initActivityTaskInfo();
		
		
		
		//////////////////////////////////////////////////////////////////////////
		//mini calendar
		var options = {
			onMonthChanged: function(dateIn) {
				//this could be an Ajax call to the backend to get this months events
				var events = [ 	{ EventID: 1, "Date": new Date(2009, 1, 1), "Title": "10:00 pm - EventTitle1", URL: "http://www.pertnearsandstone.com/Events/1" },
								{ EventID: 2, "Date": new Date(2009, 1, 2), "Title": "9:30 pm - this is a much longer title", URL: "http://www.pertnearsandstone.com/Events/1" }
				];
	
				$.jMonthCalendar.ReplaceEventCollection(events);
				return true;
			}
		};
		var events = [ 	{ EventID: 1, "Date": new Date(2009, 0, 1), "Title": "10:00 pm - EventTitle1", URL: "http://www.pertnearsandstone.com/Events/1" },
						{ EventID: 2, "Date": new Date(2009, 0, 2), "Title": "9:30 pm - this is a much longer title", URL: "http://www.pertnearsandstone.com/Events/1" }
	
		];
		var newoptions = { };
		var newevents = [ ];
		$.jMonthCalendar.Initialize(newoptions, newevents);
	
		//$.jMonthCalendar.Initialize(options, events);
		var extraEvents = [	{ EventID: 1, "Date": new Date(2011, 9, 11), "Title": "10:00 pm - EventTitle1", URL: "http://www.pertnearsandstone.com/Events/1" },
							{ EventID: 2, "Date": new Date(2011, 8, 20), "Title": "9:30 pm - this is a much longer title", URL: "http://www.pertnearsandstone.com/Events/1" }
		];
		
		
		////////////////////////////////////////////////////////////////////////////
		//Full calendar
		var date = new Date();
		var d = date.getDate();
		var m = date.getMonth();
		var y = date.getFullYear();
		
		var calendar = $('#full_calendar').fullCalendar({
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			contentHeight: 514,
			aspectRatio: 1.45,
			selectable: true,
			selectHelper: true,
			select: function(start, end, allDay) {
				var date = $.fullCalendar.parseDate (start);
				//alert (date);
	// 			var title = prompt('Event Title:');
	// 			if (title) {
	// 				calendar.fullCalendar('renderEvent',
	// 					{
	// 						title: title,
	// 						start: start,
	// 						end: end,
	// 						allDay: allDay
	// 					},
	// 					true // make the event "stick"
	// 				);
	// 			}
	// 			calendar.fullCalendar('unselect');
	
			},
			editable: true,
			events: [
				{
					title: 'All Day Event',
					start: new Date(y, m, 1)
				},
				{
					title: 'Long Event',
					start: new Date(y, m, d-5),
					end: new Date(y, m, d-2)
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d-3, 16, 0),
					allDay: false
				},
				{
					id: 999,
					title: 'Repeating Event',
					start: new Date(y, m, d+4, 16, 0),
					allDay: false
				},
				{
					title: 'Meeting',
					start: new Date(y, m, d, 10, 30),
					allDay: false
				},
				{
					title: 'Lunch',
					start: new Date(y, m, d, 12, 0),
					end: new Date(y, m, d, 14, 0),
					allDay: false
				},
				{
					title: 'Birthday Party',
					start: new Date(y, m, d+1, 19, 0),
					end: new Date(y, m, d+2, 22, 30),
					allDay: false
				},
				{
					title: 'Click for Google',
					start: new Date(y, m, 28),
					end: new Date(y, m, 29),
					url: 'http://google.com/'
				}
			]
		});
		

		//load email
		getCachedMailList("buzzsystemtest", "divEmailList");

		getContactList();
		
		$('#chattingBoxScrollbar').tinyscrollbar();
		
		$('#divEmailListPanel').tinyscrollbar();
		$('#divEmailMaximizedListPanelScrollbar').tinyscrollbar();
		$('#emailMinimizedVerticalScrollbar').tinyscrollbar();
		
		initTab();
		
	});
</script>
</head>
<body>
	<div class="divContainer">
<%-- 		<%@ include page="menu.jsp"%> --%>
		<jsp:include page="menu.jsp"></jsp:include>
		<div class="tabbed_area" style="position: relative;">
			<ul class="tabs">  
				
					<li><a href="#" onclick="returnHomePage();" id="tab_1" class="active">Home</a></li>
					<li><a href="#"  onclick="maximizeWindow(EMAIL_TAB);"  id="tab_2" >Mail</a></li>
					<li><a href="#" onclick="maximizeWindow(CALENDAR_TAB);" id="tab_3" >Calendar</a></li>
					<li><a href="#"  onclick="maximizeWindow(FORUM_TAB);" id="tab_4" >Forum</a></li>
			</ul>  
		
			<div id="content_1" class="tabContentHomeActive">
	        	<table class="tblContentContainer"><tr>
				<td class="tblContentContainer left">
					<div id="divContentLeft">
					<table class="tblContent">
						<tr><th class="tblContent bigHeader" colspan="2">PROJECTS</th></tr>
						<tr><td class="tblContent quotes"  colspan="2">"Writing of quotes here!"</td></tr>
						<tr>
							<td class="tdAllProjects"  colspan="2">
							<div class="allProjects">		
								<div class="allProjects-slider">
									<div id="projectList" style="width: 5820px; margin-left: -2910px; ">
										<% for(ProjectModel obj:projectList){ %>
											<div class="item">
												<span class="projectTitle"><%=obj.getNameToString()%> | Event Launching</span>
												<div class="projectInfo">
													<a class="" href="phase.jsp?idProject=<%=obj.getId()%>">
														<div class="projectImage"><img src="images-projects/<%=obj.getAvatar() %>" alt=""/></div>
													</a>
													<div class="projectStatusBoundary">													
														<div class="statusBar" style="background-color: RED; width: 35px;"></div>
													</div>
													<span>PM: <%=CacheUtil.getEmployeeName(obj.getPm()) %></span>
													<br/>
													<span><%=StringUtil.toDateString(obj.getPlanEndDate())%></span>
												</div>
											</div>
										<%} %>										
									</div>	
								</div>
								<div class="projectSearch">
									<a href="projectNew.jsp"><img src="images-interface/orange_plus.gif" align="top" style="margin-top: 2px;"/></a>
									<input style="height: 20px; font-size:85%;" type="input" size="55" placeholder="Type to search here! Type to search here!"></input>
								</div>
								<div class="projectPaging">
									<span id="prevButton"><img src="images-interface/left_narrow.gif"/> Previous</span>
									<span class="pageList" id="pageList">
									<!--	<span class="pageListChild" id="page1" onClick="pageListButton(this.id)">1</span>
										<span class="pageListChild" id="page2" onClick="pageListButton(this.id)">2</span>
										<span class="pageListChild" id="page3" onClick="pageListButton(this.id)">3</span>
										<span class="pageListChild" id="page4" onClick="pageListButton(this.id)">4</span>
										-->	
									</span>
									<span id="nextButton">Next <img src="images-interface/right_narrow.gif"/></span>	
								</div>
								<script language="javascript">projectSlideInit();</script>
							</div>
							</td>
						</tr>
						<tr>
							<th class="tblContent smallHeader">FORUM</th>
							<th class="tblContent smallHeader maximize" style="width: 16px; padding-right: 0px; margin-right: 0px;">
								<a class="ui-state-title-bar ui-corner-all" href="#" onclick="maximizeWindow(FORUM_TAB);" title='maximize'>
									<span class="ui-icon ui-icon-maximize"></span>
								</a>
							</th>
						</tr>
						<tr style="height: 208px;">
							<td style="border-bottom: 1px solid #C0BFBF;" colspan="2">
	<!-- 							<img width="640px" src="images-interface/forum_content.png"/> -->
	<!-- 							<div style="float: left; height: 100%"> -->
								
	<!-- 							</div> -->
	<!-- 							<div style="float: right; width: 20%"> -->
								
	<!-- 							</div> -->
	<!-- 							<div style="clear: both;"> -->
								
	<!-- 							</div> -->
								<table style="width: 100%; height: 100%">
									<tr>
										<td >
											<table height="100%">
												<tr class="trForumTopic">
													<td class="tdForumTopic">
														<div class="forumTopic">
															LIFE GURU
														</div>												
													</td>
													<td class="tdForumTopicContent">		
														Event driven systems are typically used when there is some asynchronous external activity that needs to be handled by program. For example, a user who presses the...  					
													</td>
												</tr>
												<tr class="trForumTopic">
													<td class="tdForumTopic">
														<div class="forumTopic">
															EVENT GURU
														</div>												
													</td>
													<td class="tdForumTopicContent">		
														Event driven systems are typically used when there is some asynchronous external activity that needs to be handled by program. For example, a user who presses the...  					
													</td>
												</tr>
												<tr class="trForumTopic">
													<td class="tdForumTopic">
														<div class="forumTopic">
															BUZZ ZONE
														</div>												
													</td>
													<td class="tdForumTopicContent">		
														Event driven systems are typically used when there is some asynchronous external activity that needs to be handled by program. For example, a user who presses the...  					
													</td>
												</tr>
												<tr class="trForumTopic trLastForumTopic">
													<td class="tdForumTopic">
														<div class="forumTopic">
															<div>IDEA BOX</div>
															<div style="margin-top: -22px; text-align:right; padding-right: 6px;"><img src="./images-interface/neon_idea.png"></img></div> 
														</div>												
													</td>
													<td class="tdForumTopicContent">		
														Event driven systems are typically used when there is some asynchronous external activity that needs to be handled by program. For example, a user who presses the...  					
													</td>
												</tr>
	
											</table>
										</td>
										<td style="width: 200px;">
											<div id="divChatContentPanel">
												<div style="margin-top: -2px; margin-right:-2px; height: 100%;">
													<table class="tblChatting" height="100%">
														<thead>
															<th class="tblOperations header" style="text-align: center;">Chatting</th>		
														</thead>
														<tr>
															<td style="vertical-align: top;">
																<div id="chattingBoxScrollbar">
																	<div class="scrollbar">
																		<div class="track">
																			<div class="thumb">
		<!-- 																		<div class="end"> -->
		<!-- 																		</div> -->
																			</div>
																		</div>
																	</div>
																	<div class="viewport">
																		 <div class="overview">
																			<table id="contactlist">
<!-- 																				<tr id="contact_vanpham" class="trContactListAlternative" onclick="openChatDialog('vanpham', 'Van Pham');"> -->
<!-- 																					<td class="tdContactIcon tdContatctIconOnline"></td> -->
<!-- 																					<td ><span class="tdContactName">Van Pham</span><span  class="tdContactStatus">Cai gi the Phuoc.</span></td> -->
<!-- 																				</tr> -->
																			</table>			                   
																		</div>
																	</div>
																</div>
															</td>
														</tr>
														<tr height="26px">
															<td class="tblOperations" style="text-align: right;">
																<span><input  type="text" style="width: 146px;"  placeholder="Search, add or invite..." value="" name="chatSearchBox" id="chatSearchBox"/></span>
																<span style="margin-left: 0px;"> <a href="#" ><img src="./images-interface/dropdown-button.gif" /></a> </span>
																<span style="margin-right: 5px; margin-left: 2px;"> <a href="#" ><img src="./images-interface/add-button.gif" /></a> </span>
															</td>
														</tr>
													</table>
												</div>
											</div>
										</td>								
									</tr>
								</table>
							</td>
						</tr>
					</table>
					</div>
					<div id="divActivity">
					<div  id="contentActivityHeader_1">
						
						<table class="tblContent">
						<tr>
							<td class="tblContent bigHeader"><span style="color: red;">[9]</span>MY TASKS</td>
						</tr>
						</table>
				</div>
				<div  id="contentActivityHeader_2">
						
						<table class="tblContent">
						<tr>
							<td class="tblContent bigHeader"><span style="color: red;">[29]</span>TASKS WHERE I AM THE MANAGER</td>
						</tr>
						</table>
				</div>
				<div  id="contentActivityHeader_3">
						
						<table class="tblContent">
						<tr>
							<td class="tblContent bigHeader"><span style="color: red;">[49]</span>MY ISSUES</td>
						</tr>
						</table>
				</div>
				<div  id="contentActivityHeader_4">
						
						<table class="tblContent">
						<tr>
							<td class="tblContent bigHeader"><span style="color: red;">[10]</span>ALERT</td>
						</tr>
						</table>
				</div>
				<div  id="contentActivitySelect">
						<table class="tblContent">
						<tr style="background-color: #E7E7E8;height: 30px;">
							<td class="tdSelectName">Tasks</td>
							<td class="tdFieldInput" >
<!-- 								<span><b>Tasks   </b></span> -->
								<select class="hyjack">
									<option>Tasks in the works</option>
								</select>
							</td>
							<td class="tdSelectName">Where</td>
							<td class="tdFieldInput" >
<!-- 								<span><b>Where   </b></span> -->
								<select id="selectActivity" onchange="javascript:tabSwitchActivity(parseInt(this.value),4);" class="hyjack">
									<option id="optionActivity_1" value="1">My tasks</option>
									<option id="optionActivity_2" value="2">Tasks where i am the manager</option>
									<option id="optionActivity_3" value="3">My issues</option>
									<option id="optionActivity_4" value="4">Alert</option>
								</select>
							</td>
							<td style="vertical-align:top;text-align: right;">
								<a class="hrefBack" href="javascript:tabBackProject(4);">BACK</a>
							</td>
						</tr>
						</table>
				</div>
				<div class="divActivityTaskContent" id="contentActivity_1">
						<table class="tblActivityTask">
						<tr class="trActivityTaskHeader">
							<td class="tdActivityTask" style="width: 3%"></td>
							<td class="tdActivityTask" style="width: 3%"></td>
							<td class="tdActivityTask" style="width: 3%"></td>
							<td class="tdActivityTask" style="width: 3%"></td>
							
							<td class="tdActivityTask" style="width: 29%">Name</td>
							<td class="tdActivityTask" style="width: 21%">Project</td>
							<td class="tdActivityTask" style="width: 9%">Duration</td>
							<td class="tdActivityTask" style="width: 10%">%Complete</td>
							<td class="tdActivityTask" style="width: 9%">Start date</td>
							<td class="tdActivityTask" style="width: 10%">Due date</td>
						</tr>
						<tr class="trActivityTaskHeaderIcon">
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
						
						</tr>
						<%for (int i=0;i<9;i++){ %>
						<tr id="trActivityTaskContent1_<%=i%>" class="trActivityTaskContent" onmouseover="trActivityMouseOver(1,<%=i%>);" onmouseout="trActivityMouseOut(1,<%=i%>);" onclick="openActivityItem();" >
						
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask">Task in the closing milestone</td>
							<td class="tdActivityTask">Project 1</td>
							<td class="tdActivityTask">1d</td>
							<td class="tdActivityTask">80%</td>
							<td class="tdActivityTask">10/08/2011</td>
							<td class="tdActivityTask">10/08/2011</td>
							
						</tr>
						<%} %>
						</table>
						
				</div>
				<div class="divActivityTaskContent" id="contentActivity_2">
						<table class="tblActivityTask">
						<tr class="trActivityTaskHeader">
							<td class="tdActivityTask" style="width: 3%"></td>
							<td class="tdActivityTask" style="width: 3%"></td>
							<td class="tdActivityTask" style="width: 3%"></td>
							<td class="tdActivityTask" style="width: 3%"></td>
							
							<td class="tdActivityTask" style="width: 29%">Name</td>
							<td class="tdActivityTask" style="width: 21%">Project</td>
							<td class="tdActivityTask" style="width: 9%">Duration</td>
							<td class="tdActivityTask" style="width: 10%">%Complete</td>
							<td class="tdActivityTask" style="width: 9%">Start date</td>
							<td class="tdActivityTask" style="width: 10%">Due date</td>
						</tr>
						<tr class="trActivityTaskHeaderIcon">
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
						
						</tr>
						<%for (int i=0;i<29;i++){ %>
						<tr id="trActivityTaskContent2_<%=i%>" class="trActivityTaskContent" onmouseover="trActivityMouseOver(2,<%=i%>);" onmouseout="trActivityMouseOut(2,<%=i%>);" onclick="openActivityItem();" >
						
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask">Task in the closing milestone</td>
							<td class="tdActivityTask">Project 1</td>
							<td class="tdActivityTask">1d</td>
							<td class="tdActivityTask">80%</td>
							<td class="tdActivityTask">10/08/2011</td>
							<td class="tdActivityTask">10/08/2011</td>
							
						</tr>
						<%} %>
						</table>
						
				</div>
				<div class="divActivityTaskContent" id="contentActivity_3">
						<table class="tblActivityTask">
						<tr class="trActivityTaskHeader">
							<td class="tdActivityTask" style="width: 3%"></td>
							<td class="tdActivityTask" style="width: 3%"></td>
							<td class="tdActivityTask" style="width: 3%"></td>
							<td class="tdActivityTask" style="width: 3%"></td>
							
							<td class="tdActivityTask" style="width: 29%">Name</td>
							<td class="tdActivityTask" style="width: 21%">Project</td>
							<td class="tdActivityTask" style="width: 9%">Duration</td>
							<td class="tdActivityTask" style="width: 10%">%Complete</td>
							<td class="tdActivityTask" style="width: 9%">Start date</td>
							<td class="tdActivityTask" style="width: 10%">Due date</td>
						</tr>
						<tr class="trActivityTaskHeaderIcon">
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
						
						</tr>
						<%for (int i=0;i<49;i++){ %>
						<tr id="trActivityTaskContent3_<%=i%>" class="trActivityTaskContent" onmouseover="trActivityMouseOver(3,<%=i%>);" onmouseout="trActivityMouseOut(3,<%=i%>);" onclick="openActivityItem();" >
						
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask">Task in the closing milestone</td>
							<td class="tdActivityTask">Project 1</td>
							<td class="tdActivityTask">1d</td>
							<td class="tdActivityTask">80%</td>
							<td class="tdActivityTask">10/08/2011</td>
							<td class="tdActivityTask">10/08/2011</td>
							
						</tr>
						<%} %>
						</table>
						
				</div>
				<div class="divActivityTaskContent" id="contentActivity_4">
						<table class="tblActivityTask">
						<tr class="trActivityTaskHeader">
							<td class="tdActivityTask" style="width: 3%"></td>
							<td class="tdActivityTask" style="width: 3%"></td>
							<td class="tdActivityTask" style="width: 3%"></td>
							<td class="tdActivityTask" style="width: 3%"></td>
							
							<td class="tdActivityTask" style="width: 29%">Name</td>
							<td class="tdActivityTask" style="width: 21%">Project</td>
							<td class="tdActivityTask" style="width: 9%">Duration</td>
							<td class="tdActivityTask" style="width: 10%">%Complete</td>
							<td class="tdActivityTask" style="width: 9%">Start date</td>
							<td class="tdActivityTask" style="width: 10%">Due date</td>
						</tr>
						<tr class="trActivityTaskHeaderIcon">
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
						
						</tr>
						<%for (int i=0;i<10;i++){ %>
						<tr id="trActivityTaskContent4_<%=i%>" class="trActivityTaskContent" onmouseover="trActivityMouseOver(4,<%=i%>);" onmouseout="trActivityMouseOut(4,<%=i%>);" onclick="openActivityItem();">
						
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask"></td>
							<td class="tdActivityTask">Task in the closing milestone</td>
							<td class="tdActivityTask">Project 1</td>
							<td class="tdActivityTask">1d</td>
							<td class="tdActivityTask">80%</td>
							<td class="tdActivityTask">10/08/2011</td>
							<td class="tdActivityTask">10/08/2011</td>
							
						</tr>
						<%} %>
						</table>
						
				</div>
				</div>
				
				
				
				</td>
				<td class="tblContentContainer right">
				<div id="divToday">
					<table class="tblContent">
						<tr><th class="tblContent bigHeader" colspan="2">
							<span>TODAY</span>
							<br />
							<span style="font-size:13;" id="todayLabel"></span>
						</th></tr>
						<tr>
							<td class="tblContent operations">
								<table class="tblOperations">
									<thead><td class="tblOperations header"><a href="javascript:tabSwitchActivity(1,4);">Activities</a></td></thead>
									<tr><td>
										<span class="tblOperations icon"><img src="images-interface/ico_task.gif"/></span>
										<span class="tblOperations No">[9]</span>
										<span class="tblOperations content"><a href="javascript:tabSwitchActivity(1,4);">My tasks</a></span>
									</td></tr>
									<tr><td>
										<span class="tblOperations icon"><img src="images-interface/ico_task.gif"/></span>
										<span class="tblOperations No">[29]</span>
										<span class="tblOperations content"><a href="javascript:tabSwitchActivity(2,4);">Tasks where I am the Manager [(14) overdue]</a></span>
									</td></tr>
									<tr><td>
										<span class="tblOperations icon"><img src="images-interface/ico_issue.gif"/></span>
										<span class="tblOperations No">[49]</span>
										<span class="tblOperations content"><a href="javascript:tabSwitchActivity(3,4);">My Issues [(7) overdue]</a></span>
									</td></tr>
									<tr><td>
										<span class="tblOperations icon"><img src="images-interface/ico_alert.gif"/></span>
										<span class="tblOperations No">[10]</span>
										<span class="tblOperations content"><a href="javascript:tabSwitchActivity(4,4);">Alert</a></span>
									</td></tr>
									<tr><td class="tblOperations blankLine"></td></tr>
								</table>
								<table class="tblOperations">
									<thead><td class="tblOperations header" colspan="2"><a href="approval.jsp">Approvals</a></td></thead>
									<tr>
										<td class="tblOperations item">										
											<span class="tblOperations icon"><img src="images-interface/ico_task.gif"/></span>
											<span class="tblOperations No">[20]</span>
											<span class="tblOperations content"><a href="approval.jsp?tabIndex=1">Expense Sheets</a></span>
										</td>
										<td class="tblOperations item">
											<span class="tblOperations icon"><img src="images-interface/ico_task.gif"/></span>
											<span class="tblOperations No">[2]</span>
											<span class="tblOperations content"><a href="approval.jsp?tabIndex=2">Expense Sheets</a></span>
										</td>
									</tr>
									<tr>
										<td class="tblOperations item">										
											<span class="tblOperations icon"><img src="images-interface/ico_task.gif"/></span>
											<span class="tblOperations No">[2]</span>
											<span class="tblOperations content"><a href="approval.jsp?tabIndex=3">Change Requests</a></span>
										</td>
										<td class="tblOperations item">
											<span class="tblOperations icon"><img src="images-interface/ico_task.gif"/></span>
											<span class="tblOperations No">[2]</span>
											<span class="tblOperations content"><a href="approval.jsp?tabIndex=4">Change Requests</a></span>
										</td>
									</tr>
									<tr><td class="tblOperations blankLine" colspan="2"></td></tr>
								</table>
								<table class="tblOperations">
									<thead><td class="tblOperations header" colspan="2"><a href="newItem.jsp">All New Items</a></td></thead>
									<tr>
										<td class="tblOperations item">										
											<span class="tblOperations icon"></span>
											<span class="tblOperations No">[9]</span>
											<span class="tblOperations content"><a href="newItem.jsp?tabIndex=1">Projects</a></span>
										</td>
										<td class="tblOperations item">										
											<span class="tblOperations icon"></span>
											<span class="tblOperations No">[10]</span>
											<span class="tblOperations content"><a href="newItem.jsp?tabIndex=2">Documents</a></span>
										</td>
									</tr>
									<tr>
										<td class="tblOperations item">										
											<span class="tblOperations icon"></span>
											<span class="tblOperations No">[20]</span>
											<span class="tblOperations content"><a href="newItem.jsp?tabIndex=3">Milestones</a></span>
										</td>
										<td class="tblOperations item">										
											<span class="tblOperations icon"></span>
											<span class="tblOperations No">[2]</span>
											<span class="tblOperations content"><a href="newItem.jsp?tabIndex=4">Notes</a></span>
										</td>
									</tr>
									<tr>
										<td class="tblOperations item">										
											<span class="tblOperations icon"></span>
											<span class="tblOperations No">[546]</span>
											<span class="tblOperations content"><a href="newItem.jsp?tabIndex=5">Tasks</a></span>
										</td>
										<td class="tblOperations item">										
											<span class="tblOperations icon"></span>
											<span class="tblOperations No">[4]</span>
											<span class="tblOperations content"><a href="newItem.jsp?tabIndex=6">Discussions</a></span>
										</td>
									</tr>
									<!-- <tr><td class="tblOperations blankLine" colspan="2"></td></tr> -->
								</table>
							</td>
							<td class="tblContent calendar">
								<div id="divCalendarMinimizedPanel">
									<div id="divCalendar">
										<table class="tblOperations">
											<thead id="minimizedCalendarHeader" >
												<td class="tblOperations header">
													<span>Calendar</span>
												</td>
												<td class="tblOperations maximize">	
													<a class="ui-state-title-bar ui-corner-all" href="#" onclick="maximizeWindow(CALENDAR_TAB);" title='maximize'>
														<span class="ui-icon ui-icon-maximize"></span>
													</a>
												</td>
											</thead>
											<tr><td colspan="2" class="MonthlyCalendar" id='jMonthCalendar'>
												<!--<div class="MonthlyCalendar" id='jMonthCalendar'>Calendar here!</div>-->
											</td></tr>								
										</table>
										<table class="tblOperations eventList" height="100%">
											<thead><td class="tblContent smallHeader" style="text-align: right; padding-right:10px;">List Events</td></thead>
											<tr><td class="tblOperations content" style="padding-left:10px;">Upcoming Events</td></tr>
											<tr><td style="background-color: WHITE;height: 100%;">
												<ul>
													<li>FIFA 2012</li>
													<li>PES 2012</li>
													<li>Football Manager 2012</li>
													<li>FIFA 2012</li>
													<li>PES 2012</li>
													<li>Football Manager 2012</li>
												</ul>
											</td></tr>
										</table>
									</div>
								</div>	
							</td>
						</tr>
					</table>
					</div>
					<div id='divActivityTaskInfo' style="display: none;">
					<table>
					<tr class="trActivityTaskHeaderIcon">
					<td style="padding-left: 10px;font-weight: bold;">Task</td>
					</tr>
					<tr>
					<td style="padding: 10px;">
					<ul class="tabActivityInfos"> 
						<li><a href="javascript:tabSwitchActivityInfo(1);" id="tabActivityInfo_1" class="active">General</a></li>
						<li><a href="javascript:tabSwitchActivityInfo(2);" id="tabActivityInfo_2" >Scheduling</a></li>
						<li><a href="javascript:tabSwitchActivityInfo(3);" id="tabActivityInfo_3" >Finance</a></li>
						<li><a href="javascript:tabSwitchActivityInfo(4);" id="tabActivityInfo_4" >Additional info</a></li>
					</ul>  
		
					<div id="contentActivityInfo_1" class="tabActivityInfoContentActive">
							<table >
							<tr>
								<td class="tdFieldInput" style="padding-left: 10px;padding-top: 10px;">
									<span>Name</span>
									<div class="divHyjackSelect">
									<input class="inputTaskName" type="text" value="Task in the closing milestone" />
<!-- 									<p class="pTaskName">Task in the closing milestone</p> -->
									</div>
									<span>Description</span>
									<div class="divInputTask">	
									<textarea class="inputTaskDescription" rows="2">Event driven systems are typically used when there is some asynchronous external activity that need to be</textarea>
<!-- 									<p class="pTaskDescription">Event driven systems are typically used when there is some asynchronous external activity that need to be</p> -->
									</div>
									<span>Phase</span>
									<div class="divHyjackSelect">
									<select class="hyjack">
										<option>Analysis</option>
										<option>Design</option>
										<option>Develope</option>
									</select>
									</div>
									<span>Stage</span>
									<div class="divHyjackSelect">
									<select class="hyjack">
										<option>Active</option>
										<option>Prepare</option>
									</select>
									</div>
									<span>Pending</span>
									<div class="divHyjackSelect">
									<select class="hyjack">
										<option>None</option>
										<option>Yes</option>
										
									</select>
									</div>
								</td>
								<td class="tdFieldInput" style="padding-top: 10px;vertical-align: top;">
									<span>Status</span>
									<div class="divHyjackSelect">
									<select class="hyjack">
										<option>On track</option>
										<option>To do</option>
										<option>Done</option>
									</select>
									</div>
									<span>Task style</span>
									<div class="divHyjackSelect">
									<select class="hyjack">
										<option>General</option>
										<option>Fold</option>
									</select>
									</div>
									<span>Importance</span>
									<div class="divHyjackSelect">
									<select class="hyjack">
										<option>Normal</option>
										<option>Importance</option>
										<option>Very importance</option>
										
									</select>
									</div>
									<span>Priority</span>
									<div class="divHyjackSelect">
									<select class="hyjack">
										<option>500</option>
										<option>600</option>
										<option>700</option>
										<option>800</option>
										
									</select>
									</div>
									<span>Manager</span>
									<div class="divHyjackSelect">
									<select class="hyjack">
										<option>Quynh Bui</option>
										<option>Songoku</option>
										<option>Ronaldo</option>
										<option>Tom Cruise</option>
										<option>Luyen Le</option>
										<option>Khai Tran</option>
										
									</select>
									</div>
								</td>
							</tr>
							<tr style="border-top: 1px dashed #C0BFBF;">
								<td style="padding-left: 10px;">
									<span>% Complete</span>
									<div class="divInputTask">
									<input class="inputTaskStatus" type="text" value="80%" />
									</div>
								</td>
								<td>
									<span>Internal status</span>
									<div class="divInputTask">
									<input class="inputTaskStatus" type="text" />
									</div>
								</td>
							</tr>
						</table>
            			
        			</div>
        			<div id="contentActivityInfo_2" class="tabActivityInfoContent">
            			<table  cellpadding="10px" cellspacing="10px" >
            				<tr>
            					<td>
            						<span>Start date</span>
									<div class="divInputTask">
									<input class="inputTaskStatus" type="text" value="10/08/2011" />
									</div>
									<span>Due date</span>
									<div class="divInputTask">
									<input class="inputTaskStatus" type="text" value="10/08/2011" />
									</div>
            					</td>
            					<td>
            						<span>Actual start date</span>
									<div class="divInputTask">
									<input class="inputTaskStatus" type="text" value="10/08/2011" />
									</div>
									<span>Actual end date</span>
									<div class="divInputTask">
									<input class="inputTaskStatus" type="text" value="10/08/2011" />
									</div>
            					</td>
            					<td>
            						<span>Start date varlance</span>
									<div class="divInputTask">
									<input class="inputTaskStatus" type="text" value="10/08/2011" />
									</div>
									<span>Due date variance</span>
									<div class="divInputTask">
									<input class="inputTaskStatus" type="text" value="10/08/2011" />
									</div>
            					</td>
            					
            				</tr>
            				<tr style="border-top: 1px dashed #C0BFBF;border-bottom:1px dashed #C0BFBF; ">
            					<td colspan="3">
            						<span>Committed date</span>
									<div class="divInputTask">
									<input class="inputTaskStatus" type="text" value="10/08/2011" />
									</div>
									
            					</td>
            				</tr>
            					
            				<tr>
            					<td colspan="3">
            						<table>
            							<tr>
            								<td>
            									<span>Duration</span>
<!-- 												<p class="pTaskDuration"></p> -->
												<div class="divInputTask">
													<input class="inputTaskDuration" type="text" />
												</div>
												<span>Work</span>
												<div class="divInputTask">
													<input class="inputTaskDuration" type="text" />
												</div>
											</td>
											<td>
            									<span>Actual duration</span>
												<div class="divInputTask">
													<input class="inputTaskDuration" type="text" />
												</div>
												<span>Actual effort</span>
												<div class="divInputTask">
													<input class="inputTaskDuration" type="text" />
												</div>
											</td>
											<td>
            									<span>Duration varlance</span>
												<div class="divInputTask">
													<input class="inputTaskDuration" type="text" />
												</div>
												<span>Remaining effort</span>
												<div class="divInputTask">
													<input class="inputTaskDuration" type="text" />
												</div>
											</td>
											<td>
            									<span>Budgeted work</span>
												<div class="divInputTask">
													<input class="inputTaskDuration" type="text" />
												</div>
												<span>Work varlance</span>
												<div class="divInputTask">
													<input class="inputTaskDuration" type="text" />
												</div>
											</td>
										</tr>
									</table>
            					</td>
            				</tr>
            			</table>
        			</div>
        			<div id="contentActivityInfo_3" class="tabActivityInfoContent">
            			<table >
            				<tr>
            					<td>
            						<span>Budgeted cost</span>
									<div class="divInputTask">
										<input class="inputTaskCost" type="text" />
									</div>
									<span>Expected revenue</span>
									<div class="divInputTask">
										<input class="inputTaskCost" type="text" />
									</div>
            					</td>
            					<td>
            						<span>Fixed cost</span>
									<div class="divInputTask">
										<input class="inputTaskCost" type="text" />
									</div>
									<span>Fixed price</span>
									<div class="divInputTask">
										<input class="inputTaskCost" type="text" />
									</div>
            					</td>
            					<td>
            						<span>Actual cost</span>
									<div class="divInputTask">
										<input class="inputTaskCost" type="text" />
									</div>
									<span>Actual revenue</span>
									<div class="divInputTask">
										<input class="inputTaskCost" type="text" />
									</div>
            					</td>
            					<td>
            						<span>Cost balance</span>
									<div class="divInputTask">
										<input class="inputTaskCost" type="text" />
									</div>
									<span>Revenue balance</span>
									<div class="divInputTask">
										<input class="inputTaskCost" type="text" />
									</div>
            					</td>
            				</tr>
            				<tr style="border-top: 1px dashed #C0BFBF;border-bottom:1px dashed #C0BFBF; ">
            					<td colspan="4">
            						<table>
            							<tr>
            								<td class="tdFieldInput">
            									<span>Budget status</span>
												<div class="divHyjackSelect">
													<select class="hyjack">
														<option>Rich</option>
														<option>Normal</option>
														<option>Poor</option>
														<option>Die</option>
										
													</select>
												</div>
											</td>
											<td>
            									<span>Profit</span>
												<div class="divInputTask">
													<input class="inputTaskCost" type="text" />
												</div>
												
            								</td>
            								<td>
            									<span>% Profitability</span>
												<div class="divInputTask">
													<input class="inputTaskDuration" type="text" />
												</div>
												
											</td>
											<td>
            									<span>% Invested</span>
												<div class="divInputTask">
													<input class="inputTaskDuration" type="text" />
												</div>
												
											</td>
										</tr>
									</table>
									<ul class="tabFinances"> 
										<li><a href="javascript:tabSwitchFinance(1);" id="tabFinance_1" class="active">Cost performence</a></li>
										<li><a href="javascript:tabSwitchFinance(2);" id="tabFinance_2">Revenue performence</a></li>
										<li><a href="javascript:tabSwitchFinance(3);" id="tabFinance_3">Expenses</a></li>
									</ul>  
            					</td>
            				</tr>
            				<tr>
            					<td colspan="4">
            						<div class="tabFinanceContentActive" id="contentFinance_1">
            							<table>
            								<tr>
            									<td>
            										<span>Eamed value</span>
													<div class="divInputTask">
														<input class="inputTaskCost" type="text" />
													</div>
													<span>ETC</span>
													<div class="divInputTask">
														<input class="inputTaskCost" type="text" />
													</div>
            									</td>
            									<td>
            										<span>CPI</span>
													<div class="divInputTask">
														<input class="inputTaskCost" type="text" />
													</div>
													<span>EAC</span>
													<div class="divInputTask">
														<input class="inputTaskCost" type="text" />
													</div>
            									</td>
            									<td>
            										<span>SPI</span>
													<div class="divInputTask">
														<input class="inputTaskCost" type="text" />
													</div>
													<span>TCPI</span>
													<div class="divInputTask">
														<input class="inputTaskCost" type="text" />
													</div>
            									</td>
            									<td style="vertical-align: top;">
            										<span>Cost varlance</span>
													<div class="divInputTask">
														<input class="inputTaskCost" type="text" />
													</div>
													
            									</td>
            								</tr>
            							</table>
            						</div>
            						<div class="tabFinanceContent" id="contentFinance_2">
            							<span>Content of revenue performence</span>
            						</div>
            						<div class="tabFinanceContent" id="contentFinance_3">
            							<span>Content of expenses</span>
            						</div>
            					</td>
            				</tr>
            			</table>
        			</div>
        			<div id="contentActivityInfo_4" class="tabActivityInfoContent">
            			<table  cellpadding="10px" cellspacing="10px" >
            				<tr>
            					<td>
            						<span>Created by</span>
									<div class="divInputTask">
										<input class="inputTaskStatus" type="text" value="Quynh Bui" />
									</div>
									<span>Created on</span>
									<div class="divInputTask">
										<input class="inputTaskStatus" type="text" value="14/07/2011" />
									</div>
            					</td>
            					<td style="width: 300px;"></td>
            				</tr>
            				<tr style="border-top:1px dashed #C0BFBF; ">
            					<td colspan="2">
            						<span>Last updated by</span>
									<div class="divInputTask">
										<input class="inputTaskStatus" type="text" value="Quynh Bui" />
									</div>
									<span>Last updated on</span>
									<div class="divInputTask">
										<input class="inputTaskStatus" type="text" value="15/08/2011" />
									</div>
            					</td>
            					<td style="width: 300px;"></td>
            				</tr>
            			</table>
        			</div>
        			</td>
        			</tr>
        			<tr>
        			<td style="text-align: right;padding-right: 10px;">
  					<button class="btnSubmit" onclick="closeActivityItem();">SAVE</button>
  					<button class="btnSubmit" onclick="closeActivityItem();">CANCEL</button>
  					</td>
  					</tr>
  					</table>
				</div>
					<table class="tblMail" cellspacing="0" cellpadding="0">
						<thead>
							<td class="tblOperations header">Mail</td>
							<td class="tblOperations maximize">
								<a class="ui-state-title-bar ui-corner-all" style="padding-right: -5px;" href="#" onclick="maximizeWindow(EMAIL_TAB);" title='maximize'>
										<span class="ui-icon ui-icon-maximize"></span>
								</a>
							</td>
						</thead>
						<tr>
							<td colspan="2" style="height:184px;text-align:center; border: solid 1px #C0BFBF;">
								<div id="divEmailMinimizedContentPanel" class="emailMinimizedContentPanel" style="width:100%; height: 100%;">
									<div id="divEmailContentPanel" style="display: none;">
										<div class="divSmallHeader" style="min-width: 100px;">
											<div style="float: left; width: 18px;">&nbsp;</div>
											<div class="emailMenuButton" onclick="openNewEmailDialog();"><div class="emailMenuButtonIcon"><img src="images-interface/email-new.png"/></div><div class="emailMenuButtonText">New</div> </div>
											<div class="emailMenuButton"><div class="emailMenuButtonIcon"><img  src="images-interface/email-reply.png"/></div><div  class="emailMenuButtonText">Reply</div></div>
											<div class="emailMenuButton"><div class="emailMenuButtonIcon"><img src="images-interface/email-new.png"/></div><div class="emailMenuButtonText">Reply to all</div> </div>
											<div class="emailMenuButton"><div class="emailMenuButtonIcon"><img src="images-interface/email-forward.png"/></div><div class="emailMenuButtonText">Forward</div></div>
											<div class="emailMenuButton"><div class="emailMenuButtonIcon"><img src="images-interface/email-reply.png"/></div><div class="emailMenuButtonText">Send/Receive</div></div>
											<div class="emailMenuButton"><div class="emailMenuButtonIcon"><img src="images-interface/email-reply.png"/></div><div class="emailMenuButtonText">Delete</div></div>
										</div>
										<div id="divEmailMainPanel" class="emailMainPanel">
										<div id="divMinimizedEmailNavigationContainer" class="emailNavigation">
											<div id="divEmailNavigation" style="height: 100%;">											
												<div class="MailBoxNavigation">Mail Inbox</div>
												<div>
													<div id="divInboxNavigation" class="emailNavigationSelected" onclick="selectEmailFolderNavigation(this);">
														<div id="inboxRefreshIcon" style="display: block; position: absolute; left: 5px; top: 1px;"><img src="image/refresh_icon.gif" title="checking for new email(s)"/></div>
														Inbox
														<span style="display: none;" class="emailNum inbox"> [<span id="inboxUnreadEmailNum">1</span>]</span></div>
													<div class="emailNavigationItem" onclick="selectEmailFolderNavigation(this);">Drafts<span style="display: none;" class="emailNum draft"> [<span id="draftEmailNum">5</span>]</span></div>
													<div class="emailNavigationItem" onclick="selectEmailFolderNavigation(this);"><div class="outBoxIcon">&nbsp;</div>Outbox<span class="emailNum outbox" style="display: none;" > [<span id="outboxEmailNum">15</span>]</span></div>
													<div class="emailNavigationItem" onclick="selectEmailFolderNavigation(this);">Sent items</div>
													<div class="emailNavigationItem" onclick="selectEmailFolderNavigation(this);">Trash</div>
													<div class="emailNavigationItem" onclick="selectEmailFolderNavigation(this);">Junk</div>
												</div>
											</div>
										</div>
										<div id="divEmailListAndDisplay" style="float: right; width: 468px; height: 100%">
											<div id="divEmailSplitterContainer">
												<div id="divEmailMinimizedList">
													
													
															<div class="emailListHeader"><div class="emailSubjectHeader">Subject</div><div  class="emailDateHeader">Date</div></div>
															
															<div id="divEmailListPanel" class="emailListPanel">														
																<div class="scrollbar">
																	<div class="track">
																		<div class="thumb">
																		</div>
																	</div>
																</div>
																<div class="viewport">
																	<div id="divMinimizedEmailListContainer" class="overview">
																		<div id="divEmailList">
																			
																		</div>
																	</div>
																</div>
															</div>
															
												</div>
												<div style="float:right; height: 100%; display: block; width: 221px;">
													<div id="divEmailMinimizedHeader">
														<div id="divEmailHeader" class="emailHeader">
															<div class="displayHeaderSubjectRow">
																<div class="headerLabel">Subject:&nbsp;</div>
																<div id="emailDisplaySubject"  class="headerSubject">How to join C2R club?</div>
																<div style="clear: both;"></div>
															</div>
															<div class="displayHeaderFromRow">
																<div class="headerLabel">From:&nbsp;</div>
																<div id="emailDisplaySender" class="headerSender">Dinh Sheva</div>
																<div style="clear: both;"></div>
															</div>
															<div class="displayHeaderToRow">
																<div class="headerLabel">To:&nbsp;</div>
																<div id="emailDisplayTOlist" class="headerTOist">Van Pham, Khai Tran</div>
																<div style="clear: both;"></div>
															</div>
															<div class="displayHeaderCCRow">
																<div class="headerLabel">CC:&nbsp;</div>
																<div id="emailDisplayCClist" class="headerCClist">NT Sang, Khai VD</div>
																<div style="clear: both;"></div>
															</div>
														</div>
													</div>
													<div id="emailMinimizedVerticalScrollbar">											
															<div class="scrollbar">
																<div class="track">
																	<div class="thumb">
																	</div>
																</div>
															</div>
															<div class="viewport">
																<div id="divEmailMinimizedDisplayContainer" class="overview">
																	<div id="divEmailDisplay" class="emailMinimizedDisplay">
																		<p>Đăng nhập vào account Gmail để ở trong <b> EmailServlet</b>. Sau đó vào <b>Mail Setting</b>Chọn <b>Forwarding and POP/IMAP</b> rồi chọn <b>Enable pop for all mails</b></p>
																		<p>Mấy đêm qua rồi, nghe từng lá rụng ngoài hiên. Từng hồi chuông đỗ, mà sao tái tê trong lòng.</p>
																		<p>Mấy đêm qua rồi, nghe từng lá rụng ngoài hiên. Từng hồi chuông đỗ, mà sao tái tê trong lòng.</p>
																		<p>Mấy đêm qua rồi, nghe từng lá rụng ngoài hiên. Từng hồi chuông đỗ, mà sao tái tê trong lòng.</p>
																		<p>Mấy đêm qua rồi, nghe từng lá rụng ngoài hiên. Từng hồi chuông đỗ, mà sao tái tê trong lòng.</p>
																		<p>Mấy đêm qua rồi, nghe từng lá rụng ngoài hiên. Từng hồi chuông đỗ, mà sao tái tê trong lòng.</p>
																		
																	</div>
																</div>
															</div>
													</div>
												</div>
											</div>	
										</div>
										<div style="clear: both;"></div>
									</div>
									<div style="clear: both;"></div>
								</div>	
								<div id="loadingIcon" style="width: 100%; height: 100%; padding-top: 60px;"><img src="image/ajax_loading.gif" alt="loading"/></div>
							</div>
						</td>
					</tr>
				</table>

				<!-- New email dialog -->
				
				<div id="dialog-form" class="ui-dialog" title="Compose new email">
					<fieldset>
						<div style="width: 100%;">
							<table width="100%">
								<tr>
									<td width="50px"><label for="emailNewToList">To:</label></td>
									<td><input type="text" name="emailNewToList" id="emailNewToList" class="text ui-widget-content ui-corner-all" style="width: 100%;" /></td>
								</tr>
								<tr>
									<td><label for="emailNewSubject">Subject:</label></td>
									<td><input type="text" name="emailNewSubject" id="emailNewSubject" value="" class="text ui-widget-content ui-corner-all" style="width: 100%;"/></td>
								</tr>
							</table>
						</div>
					</fieldset>
					<br/>
					<fieldset>
						<div style="width: 100%; align: center;">
							<textarea id="emailNewContent" name="emailNewContent"></textarea>
						</div>
					</fieldset>
				
				</div>
				<!-- End of new email dialog -->
					
			</td>
		</tr>
		</table>
	    </div>
	        <div id="content_2" class="tabContent">
	        	<table class="tblMail" cellspacing="0" cellpadding="0">
						<thead>
							<td class="tblOperations header">Mail</td>
							<td class="tblOperations maximize">
								<a class="ui-state-title-bar ui-corner-all" style="padding-right: -5px;" href="#" onclick="minimizeWindow(EMAIL_TAB);" title='restore'>
									<span class="ui-icon ui-icon-minimize"></span>
								</a>
							</td>	
						</thead>
						<tr>
							<td colspan="2" style="height:500px;text-align:center; ">
								<div id="divMaximizedMailContentPanel" style=" width: 100%; height: 100%">
									
<!-- 									maximized email -->
									<div class="divSmallHeader">
										<div style="float: left; width: 18px;">&nbsp;</div>
										<div class="emailMenuButton" onclick="openNewEmailDialog();"><div class="emailMenuButtonIcon"><img src="images-interface/email-new.png"/></div><div class="emailMenuButtonText">New</div> </div>
										<div class="emailMenuButton"><div class="emailMenuButtonIcon"><img  src="images-interface/email-reply.png"/></div><div  class="emailMenuButtonText">Reply</div></div>
										<div class="emailMenuButton"><div class="emailMenuButtonIcon"><img src="images-interface/email-new.png"/></div><div class="emailMenuButtonText">Reply to all</div> </div>
										<div class="emailMenuButton"><div class="emailMenuButtonIcon"><img src="images-interface/email-forward.png"/></div><div class="emailMenuButtonText">Forward</div></div>
										<div class="emailMenuButton"><div class="emailMenuButtonIcon"><img src="images-interface/email-reply.png"/></div><div class="emailMenuButtonText">Send/Receive</div></div>
										<div class="emailMenuButton"><div class="emailMenuButtonIcon"><img src="images-interface/email-reply.png"/></div><div class="emailMenuButtonText">Delete</div></div>

									</div>
										<div id="divEmailMaximizedMainPanel" class="emailMaximizedMainPanel">
											<div id="divMaximizedEmailNavigationContainer" class="emailMaximizedNavigation">
												
											</div>
										<div id="divEmailMaximizedListAndDisplay" >
											<div id="divEmailMaximizedSplitterContainer">
												<div id="divEmailMaximzedList" style="float:left; width: 520px; height: 100%;  border-right: 1px solid #B6B6B8;">
													<div class="emailListHeader">
														<div style="width: 35px; float: left;">&nbsp;</div>
														<div class="emailMaximizedSubjectHeader">Subject</div>
														<div  class="emailMaximizedDateHeader">Date</div>
														<div style="display: block;" class="emailMaximizedFromHeader">From</div>
													</div>
													
													<div style="width: 100%; height: 96%;">
														<div id="divEmailMaximizedListPanelScrollbar">
															<div class="scrollbar" ><div class="track"><div class="thumb"><div class="end"></div></div></div></div>
															<div class="viewport">
																 <div id="divMaximizedEmailListContainer" class="overview">
																	    
																</div>
															</div>
														</div>
													</div>	
												</div>
												<div style="float:left; width: 293px; height: 100%; min-width: 204px;">			
													<div id="divEmailMaximizedHeader">
														
													</div>
													<div id="emailMaximizedVerticalScrollbar">											
														<div class="scrollbar">
															<div class="track">
																<div class="thumb">
																</div>
															</div>
														</div>
														<div class="viewport">
															<div id="divEmailMaximizedDisplayContainer" class="overview">
																
															</div>
														</div>
													
													</div>
												</div>
											</div>	
										</div>
										<div style="clear: both;"></div>
									</div>
									<div style="clear: both;"></div>									
<!-- 										end of maximized email -->
									
									
								</div>
							</td>
						</tr>
					</table>
	        </div>
  	
			<div id="content_3" class="tabContent">
	        	<table class="tblCalendar">
					<tr>
						<td>
				        	<div id="divCalendarMaximizedContentPanel" class="divCalendarMaximize">
					  			<div>
									<table class="tblOperations">
										<thead>
											<td class="tblOperations header">Calendar</td>
											<td class="tblOperations maximize" >
												<a class="ui-state-title-bar ui-corner-all" href="#" onclick='minimizeWindow(CALENDAR_TAB);' title='restore'>
													<span class="ui-icon ui-icon-minimize"></span>
												</a>
											</td>
										</thead>
									</table>
					  			</div>
					  			<table class="tblMaximizedCalendarBody">
					  				<tr>
					  					<td class="tblMaximizedCalendarBody tdMiniCalendar" style='width: 17%;'>
					  						<div id="divCalendarMaximizedPanel" style="width: 220px; margin-top: -1px; margin-right: -1px;">
												<!-- This is a reserved place used for Calendar -->
								  			</div>
					  					</td>
					  					<td class="tdFullCalendar">
								  			<div id='full_calendar' style="text-align: center; margin-right: 8px; margin-bottom: 8px;">			  				
								  			</div>
					  					</td>
					  				</tr>
					  			</table>
							</div>
													
						</td>	
					</tr>
				</table>        
	        </div>

			<div id="content_4" class="tabContent">
	        	<table class="tblMail">
					<thead>
						<td class="tblOperations header">Forum</td>
						<td class="tblOperations maximize">
							<a class="ui-state-title-bar ui-corner-all" style="padding-right: -5px;" href="#" onclick="minimizeWindow(FORUM_TAB);" title='restore'>
									<span class="ui-icon ui-icon-minimize"></span>
							</a>
						</td>						
					</thead>
					<tr>
							<td colspan="2" style="height:500px;text-align:center; border: solid 1px #DBDBDC;">
								Forum is here!
							</td>
					</tr>
				</table>
	        </div>
    	</div>
	</div>
</body>
</html>